<template>
  <div class="settings-container">
    <div class="settings-content">
      <!-- 设置分类导航 -->
      <div class="settings-sidebar">
        <el-menu
          :default-active="activeCategory"
          @select="handleCategoryChange"
          class="settings-menu"
        >
          <el-menu-item
            v-for="category in settingsCategories"
            :key="category.key"
            :index="category.key"
          >
            <el-icon><component :is="category.icon" /></el-icon>
            <span>{{ category.title }}</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 设置内容区域 -->
      <div class="settings-main">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <h3>{{ currentCategory?.title }}</h3>
              <p>{{ currentCategory?.description }}</p>
            </div>
          </template>

          <!-- 主题设置 -->
          <div v-if="activeCategory === 'theme'" class="settings-section">
            <el-form :model="settings.theme" label-width="120px">
              <el-form-item label="主题模式">
                <el-radio-group v-model="settings.theme.mode">
                  <el-radio value="light">亮色</el-radio>
                  <el-radio value="dark">暗色</el-radio>
                  <el-radio value="auto">跟随系统</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="主色调">
                <el-color-picker v-model="settings.theme.primaryColor" />
              </el-form-item>
              
              <el-form-item label="圆角大小">
                <el-radio-group v-model="settings.theme.borderRadius">
                  <el-radio value="none">无</el-radio>
                  <el-radio value="small">小</el-radio>
                  <el-radio value="medium">中</el-radio>
                  <el-radio value="large">大</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>

          <!-- 界面设置 -->
          <div v-if="activeCategory === 'interface'" class="settings-section">
            <el-form :model="settings.interface" label-width="120px">
              <el-form-item label="侧边栏模式">
                <el-radio-group v-model="settings.interface.sidebarMode">
                  <el-radio value="vertical">垂直</el-radio>
                  <el-radio value="horizontal">水平</el-radio>
                  <el-radio value="mix">混合</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="默认折叠侧边栏">
                <el-switch v-model="settings.interface.sidebarCollapsed" />
              </el-form-item>
              
              <el-form-item label="页面大小">
                <el-select v-model="settings.interface.pageSize">
                  <el-option label="10条/页" :value="10" />
                  <el-option label="20条/页" :value="20" />
                  <el-option label="50条/页" :value="50" />
                  <el-option label="100条/页" :value="100" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="显示面包屑">
                <el-switch v-model="settings.interface.showBreadcrumb" />
              </el-form-item>
              
              <el-form-item label="显示标签页">
                <el-switch v-model="settings.interface.showTabs" />
              </el-form-item>
              
              <el-form-item label="显示Logo">
                <el-switch v-model="settings.interface.showLogo" />
              </el-form-item>
            </el-form>
          </div>

          <!-- 语言设置 -->
          <div v-if="activeCategory === 'language'" class="settings-section">
            <el-form :model="settings.language" label-width="120px">
              <el-form-item label="界面语言">
                <el-select v-model="settings.language.locale">
                  <el-option
                    v-for="locale in settings.language.availableLocales"
                    :key="locale"
                    :label="getLocaleLabel(locale)"
                    :value="locale"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item label="备用语言">
                <el-select v-model="settings.language.fallbackLocale">
                  <el-option label="中文" value="zh-cn" />
                  <el-option label="English" value="en" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <!-- 通知设置 -->
          <div v-if="activeCategory === 'notification'" class="settings-section">
            <el-form :model="settings.notification" label-width="120px">
              <el-form-item label="启用声音">
                <el-switch v-model="settings.notification.enableSound" />
              </el-form-item>
              
              <el-form-item label="桌面通知">
                <el-switch v-model="settings.notification.enableDesktop" />
              </el-form-item>
              
              <el-form-item label="邮件通知">
                <el-switch v-model="settings.notification.enableEmail" />
              </el-form-item>
              
              <el-form-item label="短信通知">
                <el-switch v-model="settings.notification.enableSms" />
              </el-form-item>
              
              <el-form-item label="音量大小">
                <el-slider
                  v-model="settings.notification.soundVolume"
                  :min="0"
                  :max="100"
                  show-input
                />
              </el-form-item>
              
              <el-form-item label="通知类型">
                <el-checkbox-group v-model="notificationTypes">
                  <el-checkbox value="system">系统通知</el-checkbox>
                  <el-checkbox value="security">安全通知</el-checkbox>
                  <el-checkbox value="business">业务通知</el-checkbox>
                  <el-checkbox value="marketing">营销通知</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>

          <!-- 安全设置 -->
          <div v-if="activeCategory === 'security'" class="settings-section">
            <el-form :model="settings.security" label-width="120px">
              <el-form-item label="会话超时(分钟)">
                <el-input-number
                  v-model="settings.security.sessionTimeout"
                  :min="5"
                  :max="1440"
                />
              </el-form-item>
              
              <el-form-item label="最大登录尝试次数">
                <el-input-number
                  v-model="settings.security.maxLoginAttempts"
                  :min="3"
                  :max="10"
                />
              </el-form-item>
              
              <el-form-item label="密码过期天数">
                <el-input-number
                  v-model="settings.security.passwordExpiry"
                  :min="30"
                  :max="365"
                />
              </el-form-item>
              
              <el-form-item label="双因子认证">
                <el-switch v-model="settings.security.twoFactorAuth" />
              </el-form-item>
              
              <el-form-item label="IP白名单">
                <el-input
                  v-model="ipWhitelistText"
                  type="textarea"
                  :rows="3"
                  placeholder="每行一个IP地址"
                />
              </el-form-item>
              
              <el-form-item label="登录日志保留天数">
                <el-input-number
                  v-model="settings.security.loginLogRetention"
                  :min="30"
                  :max="1095"
                />
              </el-form-item>
            </el-form>
          </div>

          <!-- 性能设置 -->
          <div v-if="activeCategory === 'performance'" class="settings-section">
            <el-form :model="settings.performance" label-width="120px">
              <el-form-item label="启用缓存">
                <el-switch v-model="settings.performance.enableCache" />
              </el-form-item>
              
              <el-form-item label="缓存过期时间(秒)">
                <el-input-number
                  v-model="settings.performance.cacheExpiry"
                  :min="60"
                  :max="86400"
                />
              </el-form-item>
              
              <el-form-item label="启用压缩">
                <el-switch v-model="settings.performance.enableCompression" />
              </el-form-item>
              
              <el-form-item label="启用懒加载">
                <el-switch v-model="settings.performance.enableLazyLoad" />
              </el-form-item>
              
              <el-form-item label="最大并发请求数">
                <el-input-number
                  v-model="settings.performance.maxConcurrentRequests"
                  :min="1"
                  :max="50"
                />
              </el-form-item>
              
              <el-form-item label="请求超时时间(毫秒)">
                <el-input-number
                  v-model="settings.performance.requestTimeout"
                  :min="1000"
                  :max="60000"
                />
              </el-form-item>
            </el-form>
          </div>

          <!-- 系统设置 -->
          <div v-if="activeCategory === 'system'" class="settings-section">
            <el-form :model="settings.system" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="settings.system.systemName" />
              </el-form-item>
              
              <el-form-item label="系统版本">
                <el-input v-model="settings.system.systemVersion" disabled />
              </el-form-item>
              
              <el-form-item label="系统描述">
                <el-input
                  v-model="settings.system.systemDescription"
                  type="textarea"
                  :rows="3"
                />
              </el-form-item>
              
              <el-form-item label="系统Logo">
                <el-input v-model="settings.system.systemLogo" />
              </el-form-item>
              
              <el-form-item label="系统图标">
                <el-input v-model="settings.system.systemFavicon" />
              </el-form-item>
              
              <el-form-item label="版权信息">
                <el-input v-model="settings.system.copyright" />
              </el-form-item>
              
              <el-form-item label="ICP备案号">
                <el-input v-model="settings.system.icp" />
              </el-form-item>
              
              <el-form-item label="允许注册">
                <el-switch v-model="settings.system.enableRegistration" />
              </el-form-item>
              
              <el-form-item label="允许访客访问">
                <el-switch v-model="settings.system.enableGuestAccess" />
              </el-form-item>
              
              <el-form-item label="维护模式">
                <el-switch v-model="settings.system.maintenanceMode" />
              </el-form-item>
            </el-form>
          </div>

          <!-- 数据设置 -->
          <div v-if="activeCategory === 'data'" class="settings-section">
            <el-form :model="settings.data" label-width="120px">
              <el-form-item label="数据保留天数">
                <el-input-number
                  v-model="settings.data.dataRetention"
                  :min="30"
                  :max="3650"
                />
              </el-form-item>
              
              <el-form-item label="备份频率">
                <el-radio-group v-model="settings.data.backupFrequency">
                  <el-radio value="daily">每日</el-radio>
                  <el-radio value="weekly">每周</el-radio>
                  <el-radio value="monthly">每月</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="备份保留天数">
                <el-input-number
                  v-model="settings.data.backupRetention"
                  :min="7"
                  :max="365"
                />
              </el-form-item>
              
              <el-form-item label="自动备份">
                <el-switch v-model="settings.data.enableAutoBackup" />
              </el-form-item>
              
              <el-form-item label="备份位置">
                <el-input v-model="settings.data.backupLocation" />
              </el-form-item>
              
              <el-form-item label="允许数据导出">
                <el-switch v-model="settings.data.enableDataExport" />
              </el-form-item>
              
              <el-form-item label="允许数据导入">
                <el-switch v-model="settings.data.enableDataImport" />
              </el-form-item>
            </el-form>
          </div>

          <!-- 集成设置 -->
          <div v-if="activeCategory === 'integration'" class="settings-section">
            <el-form :model="settings.integration" label-width="120px">
              <el-form-item label="启用API">
                <el-switch v-model="settings.integration.enableApi" />
              </el-form-item>
              
              <el-form-item label="API频率限制">
                <el-input-number
                  v-model="settings.integration.apiRateLimit"
                  :min="100"
                  :max="10000"
                />
              </el-form-item>
              
              <el-form-item label="启用Webhook">
                <el-switch v-model="settings.integration.enableWebhook" />
              </el-form-item>
              
              <el-form-item label="Webhook URL">
                <el-input v-model="settings.integration.webhookUrl" />
              </el-form-item>
              
              <el-form-item label="启用SSO">
                <el-switch v-model="settings.integration.enableSso" />
              </el-form-item>
              
              <el-form-item label="SSO提供商">
                <el-input v-model="settings.integration.ssoProvider" />
              </el-form-item>
              
              <el-form-item label="启用OAuth">
                <el-switch v-model="settings.integration.enableOauth" />
              </el-form-item>
              
              <el-form-item label="OAuth提供商">
                <el-checkbox-group v-model="settings.integration.oauthProviders">
                  <el-checkbox value="github">GitHub</el-checkbox>
                  <el-checkbox value="google">Google</el-checkbox>
                  <el-checkbox value="microsoft">Microsoft</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <!-- 操作按钮 -->
        <div class="settings-actions">
          <el-button @click="resetSettings">重置</el-button>
          <el-button @click="saveSettings" type="primary" :loading="settingsLoading">
            保存设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAppStore } from '@/stores/app'
import type { SettingsCategory } from '@/types/settings'

const appStore = useAppStore()

// 设置分类
const settingsCategories: SettingsCategory[] = [
  { key: 'theme', title: '主题外观', description: '自定义界面主题和颜色', icon: 'Brush', order: 1 },
  { key: 'interface', title: '界面设置', description: '配置界面布局和显示选项', icon: 'Monitor', order: 2 },
  { key: 'language', title: '语言设置', description: '设置界面语言和本地化', icon: 'Flag', order: 3 },
  { key: 'notification', title: '通知设置', description: '配置通知方式和类型', icon: 'Bell', order: 4 },
  { key: 'security', title: '安全设置', description: '配置安全策略和权限', icon: 'Lock', order: 5 },
  { key: 'performance', title: '性能设置', description: '优化系统性能和缓存', icon: 'Setting', order: 6 },
  { key: 'system', title: '系统设置', description: '系统基本信息和配置', icon: 'Tools', order: 7 },
  { key: 'data', title: '数据设置', description: '数据管理和备份配置', icon: 'Folder', order: 8 },
  { key: 'integration', title: '集成设置', description: '第三方服务和API配置', icon: 'Connection', order: 9 }
]

// 当前选中的分类
const activeCategory = ref('theme')

// 当前分类信息
const currentCategory = computed(() => 
  settingsCategories.find(cat => cat.key === activeCategory.value)
)

// 设置对象
const settings = computed(() => appStore.settings)

// 通知类型数组（用于复选框组）
const notificationTypes = computed({
  get: () => {
    const types = []
    if (settings.value.notification.notificationTypes.system) types.push('system')
    if (settings.value.notification.notificationTypes.security) types.push('security')
    if (settings.value.notification.notificationTypes.business) types.push('business')
    if (settings.value.notification.notificationTypes.marketing) types.push('marketing')
    return types
  },
  set: (value: string[]) => {
    settings.value.notification.notificationTypes.system = value.includes('system')
    settings.value.notification.notificationTypes.security = value.includes('security')
    settings.value.notification.notificationTypes.business = value.includes('business')
    settings.value.notification.notificationTypes.marketing = value.includes('marketing')
  }
})

// IP白名单文本
const ipWhitelistText = computed({
  get: () => settings.value.security.ipWhitelist.join('\n'),
  set: (value: string) => {
    settings.value.security.ipWhitelist = value.split('\n').filter(ip => ip.trim())
  }
})

// 切换分类
const handleCategoryChange = (category: string) => {
  activeCategory.value = category
}

// 获取语言标签
const getLocaleLabel = (locale: string) => {
  const labels: Record<string, string> = {
    'zh-cn': '中文',
    'en': 'English'
  }
  return labels[locale] || locale
}

// 保存设置
const saveSettings = async () => {
  try {
    await appStore.updateSettings(settings.value)
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
  }
}

// 重置设置
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm('确定要重置当前分类的设置吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 这里可以实现重置逻辑
    ElMessage.success('设置已重置')
  } catch (error) {
    // 用户取消
  }
}

// 监听设置变化
watch(settings, () => {
  appStore.settingsChanged = true
}, { deep: true })

onMounted(() => {
  // 加载设置
  appStore.getSettings()
})
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.settings-header {
  margin-bottom: 20px;
  
  h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #303133;
  }
}

.settings-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 120px);
}

.settings-sidebar {
  width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .settings-menu {
    border: none;
    
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

.settings-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  flex: 1;
  
  .card-header {
    h3 {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    p {
      margin: 0;
      color: #606266;
      font-size: 14px;
    }
  }
}

.settings-section {
  .el-form-item {
    margin-bottom: 20px;
  }
}

.settings-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// 带图标的表单标签样式
.form-label-with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #606266;
  
  .el-icon {
    color: #409eff;
    font-size: 16px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .settings-content {
    flex-direction: column;
    height: auto;
  }
  
  .settings-sidebar {
    width: 100%;
    
    .settings-menu {
      display: flex;
      overflow-x: auto;
      
      .el-menu-item {
        white-space: nowrap;
        min-width: 120px;
      }
    }
  }
}
</style>
